<template>
  <div>
    <!-- 表单-->
    <div class="weui-cells__title">查询空床位</div>
    <div class="weui-cells weui-cells_form">
      <!--        选择宿舍楼 -->
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">宿舍楼</label>
        </div>
        <div class="weui-cell__bd">
          <select id="buildingId" class="weui-select" v-model="buildingId">
            <option value="0" selected disabled style="display: none;">--请选择宿舍楼--</option>
            <option value="1">5号楼</option>
            <option value="2">13号楼</option>
          </select>
        </div>
      </div>

      <div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
          <label class="weui-label">性别</label>
        </div>
        <div class="weui-cell__bd">
          <select class="weui-select" id="gender" v-model="gender">
            <option value="0" selected disabled style="display: none;">--性别--</option>
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">所需床位数</label>
        </div>
        <div class="weui-cell__bd">
          <input id="num" type="number" class="weui-input" placeholder="选择空床位数量" v-model="requiredNum">
        </div>
      </div>
    </div>

    <div class="weui-btn-area">
      <button id="btn1"  class="weui-btn weui-btn_primary" @click="query">查询宿舍余量</button>
    </div>

<!--    <div v-if="is_success">-->
<!--      <span>满足条件的宿舍数: {{availableNum}} 个</span>-->
<!--    </div>-->

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "QueryDorm",
  data(){
    return{
      buildingId: '',
      gender: '',
      requiredNum: '',
      is_success: '',
      availableNum: '',
    }
  },
  methods:{
    query(){
      let token = localStorage.getItem("token")
      axios.defaults.withCredentials = true
      document.cookie = 'access-token' + token

      let param= {
        "buildingId": this.buildingId,
        "gender": this.gender,
        "requiredNum": this.requiredNum,
      }
      console.log(param)

      this.$axios.post("http://localhost:8090/dorm/query",param)
      .then(res => {
          if(res.data.code == 200){
            console.log("接收到了响应...")
            console.log(res.data.result)
            console.log(res.data.result.length)
            this.is_success = true
            this.availableNum = res.data.result.length
            alert("满足条件的宿舍数: " + this.availableNum +"个")
          }else{
            alert(res.data.message)
            this.is_success = false
          }
      })
    }
  }
}
</script>

<style scoped>

</style>